<script>
import {ref} from "vue";
const input1 = ref('');
</script>

<template>
  <div>
  <!-- 页面内容 -->
  <div class="page-content">
    <!-- 这里放置你的页面内容 -->
    <h1></h1>
    <p></p>
  </div>

  <footer id="bottomNav">
    <nav class="footer-nav">
      <div class="language-selector">
        <select id="language-select" name="language">
          <option value="zh">中文</option>
          <option value="en">英文</option>
        </select>
      </div>
    </nav>
    <p class="footer-text">©️2024 XXXX公司所有｜XX网安备00000000000000｜XICP备2024000000号-0</p>
    <p class="right-text" >订阅我们的网站</p>
  </footer>
</div>
</template>
<style scoped>


.page-content {
  flex: 1;
  padding: 20px;
}
footer {
  display: flex;
  justify-content: space-between; /* 分配空间，使得第一个和第三个组件分别靠左和靠右 */
  align-items: center; /* 垂直居中子元素 */
  padding: 10px; /* 添加一些内边距 */
  width: 99%; /* 宽度 */
  background-color: #c6e2ff;
  color:#333333;
}

.footer-text {
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: relative;
}

.right-text {
  float: right;
  margin-bottom: 1%;
  font-size: 14px;
  position: absolute;
  right: 1%; /* 靠右对齐 */
}

.language-selector {
  margin-bottom: 1%;
  float: left;
}

</style>